<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="frame-layout">
	<head>
		<link href="/webjars/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" />
		<link href="lib/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />
		<link href="lib/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
	</head>
	<body>
		<div th:remove="tag" layout:fragment="content">
			<div class="panel panel-default">
			    <div class="panel-heading">
			        <h2 class="panel-title"><i class="fa fa-dashboard"></i> 总览</h2>
			    </div>
			    <div class="panel-body">
			    	<div class="callout callout-info lead">
					    <p><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
					     运维负责人：<span th:text="${session.activated_config.sysAdmin}" th:remove="tag"></span>&nbsp;&nbsp;&nbsp;&nbsp;开发负责人：<span th:text="${session.activated_config.techAdmin}" th:remove="tag"></span>
					    </p>
					  </div>
			    	
			        <ul class="nav nav-tabs" role="tablist">
			            <li id="jobs_tab" role="presentation" class="active"><a href="#jobs" aria-controls="jobs" role="tab" data-toggle="tab"><i class="fa fa-bar-chart-o fa-fw"></i> 作业总览</a></li>
			            <li id="servers_tab" role="presentation"><a href="#servers" aria-controls="servers" role="tab" data-toggle="tab"><i class="fa fa-area-chart"></i> Executor总览</a></li>
			        </ul>
			        <br />
			        <div class="tab-content">
			            <div role="tabpanel" class="tab-pane active" id="jobs">
			            	<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#jobs-chart-body">
										<h3 class="pull-left panel-title">作业数量: <span class="red" id="jobs-count"></span></h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="jobs-chart-body" class="panel-collapse collapse in">
									<div class="panel-body">
			                			<div id="jobs-chart" style="height: 300px"  class="pull-left"></div>
			                			<div id="jobs-rate-3dcolumn" style="height: 300px" class="pull-left"></div>
                						<div class="clearfix"></div>
			                		</div>
								</div>
							</div>
			                <table id="jobs-overview-tbl" class="table table-hover table-bordered">
			                    <thead>
			                        <tr>
			                        	<th><input id="totalCheckbox" type="checkbox"/></th>
			                            <th>作业名</th>
			                            <th>成功率</th>
			                            <th>运行状态</th>
			                            <th>分片负荷</th>
			                            <th>分片数</th>
			                            <th>优先Executor</th>
			                            <th>已分片Executor</th>
			                            <th>cron表达式</th>
			                            <th>下次开始时间</th>
			                            <th>作业等级</th>
			                            <th>所属分组</th>
			                            <th>描述</th>
			                            <th>操作</th>
			                        </tr>
			                    </thead>
			                    <tbody>
			                    </tbody>
			                </table>
			            </div>
			        
			            <div role="tabpanel" class="tab-pane" id="servers">
			            	<div class="panel panel-default">
								<div class="panel-heading">
									<a data-toggle="collapse" href="#executors-chart-body">
										<h3 class="pull-left panel-title">Executor数量: <span class="red" id="executors-count"></span> (ONLINE: <span class="red" id="executors-online-count"></span>, OFFLINE: <span class="red" id="executors-offline-count"></span>)</h3>
										<i class="pull-right fa fa-minus"></i>
									</a>
									<div class="clearfix"></div>
								</div>
								<div id="executors-chart-body" class="panel-collapse collapse in">
									<div class="panel-body">	
			                			<div id="executors-donuts" style="height: 300px" class="pull-left"></div>
			                			<div id="executors-3dcolumn" style="height: 300px" class="pull-left"></div>
			                			<div class="clearfix"></div>
			                		</div>
								</div>
							</div>
			                <table id="servers-overview-tbl" class="table table-hover table-bordered">
			                    <thead>
			                        <tr>
			                            <th><input id="totalExecutorCheckbox" type="checkbox"/></th>
			                            <th>Executor</th>
			                            <th>IP</th>
			                            <th>总负荷</th>
			                            <th>已分配的作业分片</th>
			                            <th>状态</th>
			                            <th>启动时间</th>
			                            <th>版本</th>
			                            <th>操作</th>
			                        </tr>
			                    </thead>
			                    <tbody>
			                    </tbody>
			                </table>
			            </div>
			    	</div>
			    </div>
			</div>
			<div id="batch-add-job-dialog" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">导入作业</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="downloadTemplateFile" class="col-sm-3 control-label" style="text-align:right;">下载模版文件</label>
								<a id="downloadTemplateFile" href="download/jobs-template.xls">点击下载</a>（请勿更改表头数据）
							</div>
							<div class="form-group">
								<form id="fileupload" action="executor/batchAddJobs" method="POST" enctype="multipart/form-data">
									<label for="inputFile" class="col-sm-3 control-label" style="text-align:right;">导入文件</label>
									<input id="inputFile" type="file" name="files" multiple="multiple"  title="导入.xls文件" />
									<input type="hidden" name="nns" th:value="${session.activated_config}?${session.activated_config.nameAndNamespace}:未连接" />
								</form>
							</div>
							<div class="form-group">
								<label class="col-sm-1 control-label" style="text-align:right;"></label>
								（温馨提示：Shell消息作业导入要求所有executor版本都是1.1.2及以上）
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button id="batch-add-job-dialog-confirm-btn" data-loading-text='请求中...' type="button" class="btn btn-danger ladda-button" data-style="expand-right">
								<span class="ladda-label">确认</span>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div id="add-job-dialog" class="modal fade">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			                <h4 class="modal-title" id="addJobTitle">添加作业</h4>
			            </div>
			            <div class="modal-body">
			            	<div class="form-group">
				            	<label for="jobType" class="col-sm-3 control-label" style="text-align:right;">作业类型</label>
				                <select id="jobType" title="请选择要添加的作业类型" style="width:50%" class="form-control" data-toggle="tooltip" data-placement="bottom">
									<option value="JAVA_JOB">&nbsp;Java定时作业</option>
									<option value="SHELL_JOB">&nbsp;Shell定时作业</option>
								</select>
							</div>
							<div class="form-group">
								<label for="jobName" class="col-sm-3 control-label" style="text-align:right;">作业名</label>
								<input type="text" id="jobName" name="jobName" style="width:50%" class="form-control" data-toggle="tooltip" data-placement="bottom" title="作业名称，如SaturnJavaJob" />
							</div>
							<div class="form-group hide-when-is-script-job">
								<label for="jobClass" class="col-sm-3 control-label" style="text-align:right;">作业实现类</label>
								<input type="text" id="jobClass" name="jobClass" style="width:50%" class="form-control" data-toggle="tooltip" data-placement="bottom" title="作业的完整类名，如com.vip.saturn.job.SaturnJavaJob" />
							</div>
							<div class="form-group hide-when-is-msg-job">
								<label for="cron" class="col-sm-3 control-label" style="text-align:right;">cron表达式</label>
								<input type="text" id="cron" name="cron" style="width:50%" class="form-control" data-toggle="tooltip" data-placement="bottom" value="0/5 * * * * ?" title="作业启动时间的cron表达式。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每10秒运行：*/10 * * * * ? &nbsp;&nbsp; 每5分钟运行：0 */5 * * * ?" />
							</div>
							<div class="form-group">
								<label for="shardingTotalCount" class="col-sm-3 control-label" style="text-align:right;">作业分片总数</label>
								<input type="number" min="1" id="shardingTotalCount" name="shardingTotalCount" style="width:50%" class="form-control" data-toggle="tooltip" data-placement="bottom" title="设置该作业的分片总数" th:required="required" value="1"/>
							</div>
							<div class="form-group">
			                    <label for="jobParameter" class="col-sm-3 control-label" style="text-align:right;">自定义参数</label>
			                    <input type="text" id="jobParameter" name="jobParameter" class="form-control" data-toggle="tooltip" style="width:50%"
			                    data-placement="bottom" title="配置格式: 多个配置使用逗号分隔(key1=value1, key2=value2)。在分片序列号/参数对照表中可作为alias形式引用，格式为{key1}" />
			                </div>
			                <div class="form-group">
			                    <label for="shardingItemParameters" class="col-sm-3 control-label" style="text-align:right;">分片序列号/参数对照表</label>
			                    <textarea  rows="5" id="shardingItemParameters" name="shardingItemParameters" class="form-control" data-toggle="tooltip" data-placement="bottom" style="width:50%" title='分片序列号和参数用等号分隔，多个键值对用逗号分隔，类似map。分片序列号从0开始，不可大于或等于作业分片总数。如：0=a,1=b,2=c; !!会给转成"。特别的，对于本地模式的作业，只需要输入如：*=a，就可以了。'></textarea>
			                </div>
			                <div class="form-group">
			                    <label for="description" class="col-sm-3 control-label" style="text-align:right;">作业描述信息</label>
								<textarea id="description" name="description" class="form-control" style="width:50%"></textarea>
			                </div>
							<input type="hidden" id="loadLevel" />
							<input type="hidden" id="preferList" />
							<input type="hidden" id="useDispreferList" />
							<input type="hidden" id="localMode" />
							<input type="hidden" id="processCountIntervalSeconds" />
							<input type="hidden" id="timeoutSeconds" />
							<input type="hidden" id="pausePeriodDate" />
							<input type="hidden" id="pausePeriodTime" />
							<input type="hidden" id="showNormalLog" />
							<input type="hidden" id="isCopyJob" />
							<input type="hidden" id="originJobName" />
						</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button id="add-job-dialog-confirm-btn" data-loading-text='请求中...' type="button" class="btn btn-danger ladda-button" data-style="expand-right">
			            		<span class="ladda-label">确认</span>
			            	</button>
			            </div>
			        </div>
			    </div>
			</div>
			<input type="hidden" id="regNameFromServer" th:value="${session.activated_config}?${session.activated_config.nameAndNamespace}:未连接" />
			<input type="hidden" id="namespace" th:value="${session.activated_config}?${session.activated_config.namespace}:''" />
			
			<div th:replace="fragments :: success-dialog"></div>
			<div th:replace="fragments :: confirm-dialog(id='change-jobStatus-confirm-dialog', test='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='change-jobStatus-batch-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='confirmDependencies-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='remove-job-confirm-dialog', text='确认删除作业吗？')"></div>
			<div th:replace="fragments :: confirm-dialog(id='remove-job-batch-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='remove-executor-confirm-dialog', text='')"></div>
			<div th:replace="fragments :: confirm-dialog(id='shard-all-at-once-confirm-dialog', text='确认要进行一键重排吗？（即把当前域下所有分片按照作业负荷以及优先Executor等作业配置重新进行排序。注：重排可能导致分片分布剧烈动荡，请谨慎操作！另外在操作本功能时，请尽量避免同时操作Executor上下线或启用禁用作业，以免影响到重排的均衡效果！）')"></div>
			<div th:replace="fragments :: prompt-dialog(id='batch-add-job-prompt-dialog', text='')"></div>
			<div th:replace="fragments :: failure-dialog(id='executor-failure-dialog', reason='')"></div>

		</div>
		<div th:remove="tag" layout:fragment="footer-scripts">
			<script type="text/x-mustache" id="logstash-block-template">
				<span><strong>app_domain:</strong>{{appDomain}} <br /></span>
				<span><strong>domain:</strong>{{domain}} <br /></span>
				<span><strong>path:</strong>{{path}} <br /></span>
				<span><strong>@version:</strong>{{version}} <br /></span>
				<span><strong>type:</strong>{{type}} <br /></span>
			</script>
			<script src="/webjars/jquery-form/3.51/jquery.form.js"></script>
			<script src="/webjars/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
			<script src="/webjars/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
			<script src="lib/datetimepicker/moment-with-locales.js"></script>
			<script src="lib/datetimepicker/bootstrap-datetimepicker.js"></script>
			<script src="lib/mustache/mustache.min.js"></script>
			<script src="/webjars/highcharts/4.2.3/highcharts.js"></script>
			<script src="/webjars/highcharts/4.2.3/highcharts-3d.js"></script>
			<script src="js/overview.js"></script>
		</div>
	</body>
</html>
